<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .box2 {
            background-color: blue;
            font-size: 60px;
        }
    </style>

</head>

<body>
    <div id="app">
        <!-- v-bind 绑定的是元素的属性 -->
        <!-- <div title="" id="" class="" style="">显示吗</div> -->

        <!-- <div v-bind:title="titleMsg">显示吗</div> -->

        <!-- v-bind:class  -->
        <!-- 类绑定有两种方式，第一种是对象语法，第二种是数组语法 -->
        <!-- <div v-bind:class="{key:value,key2:value2,...}"></div> -->
        <!-- key:类名  value:true/false -->
        <!-- <div v-bind:class="{box1:isBox1,box2:isBox2}">类对象绑定语法</div> -->
        <!-- <div v-bind:class="classObj">类对象绑定语法</div> -->

        <!-- 数组语法 -->
        <!-- <div v-bind:class="[isBox1?'box1':'',isBox2?'box2':'']">数组绑定语法</div> -->
        <!-- <div v-bind:class="[{box1:isBox1,box2:isBox2}]">数组绑定语法</div> -->
        <!-- <div v-bind:class="[classObj]">数组绑定语法</div> -->
        <!-- <div v-bind:class="isBox1?'box1':''">数组绑定语法</div> -->


        <!-- 绑定style  对象和数组语法 -->
        <!-- <div v-bind:style="{key:value,key2:value2,...}">style绑定 对象语法</div> -->
        <!-- key:样式名  value:样式值 -->
        <!-- <div v-bind:style="{color:c,fontSize:fs+'px'}">style绑定 对象语法</div> -->
        <!-- <div v-bind:style="[{color:c,fontSize:fs+'px'},{},?:]">style绑定 对象语法</div> -->
        <!-- v-bind:style   v-bind:class  -->

        <!-- v-bind：语法糖(简写) : -->
        <!-- :style   :class  -->

        <button v-on:click="hanleRandomColor">获取随机颜色值</button>


    </div>


    <!-- 引入vue -->
    <script src=" https://unpkg.com/vue@3/dist/vue.global.js">
    </script>
    <script>
        const { createApp, ref, reactive } = Vue;
        // 创建Vue实例
        const app = createApp({
            setup() {
                const titleMsg = ref('我是title')
                const isBox1 = ref(false)
                const isBox2 = ref(false)
                const classObj = reactive({
                    box1: isBox1,
                    box2: isBox2
                })

                const c = ref('red')
                const fs = ref(12)
                // 获取随机颜色函数
                const getRandomColor = () => {
                    const r = Math.floor(Math.random() * 256)
                    const g = Math.floor(Math.random() * 256)
                    const b = Math.floor(Math.random() * 256)
                    return `rgb(${r},${g},${b})`
                }
                const hanleRandomColor = () => {
                    c.value = getRandomColor()
                    fs.value = Math.floor(Math.random() * 100) + 10
                }


                return {
                    titleMsg,
                    isBox1,
                    isBox2,
                    classObj,
                    c,
                    hanleRandomColor,
                    fs

                }
            }
        })
        // 挂载到dom
        app.mount('#app')
    </script>
</body>

</html>